<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>changePage JSON Sample</title>
<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.2.0.css">
<script src="../../../js/jquery.js"></script>
	<script src="../../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../../js/jquery.mobile-1.2.0.js"></script>

<script>

// Load the JSON data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( url, options )
{
	$.getJSON( url, function( category ) {
		if ( category ) {
			// Get the page we are going to dump our content into.
			var $page = $( "#category-items" ),
	
				// Get the header for the page.
				$header = $page.children( ":jqmData(role=header)" ),
	
				// Get the content area element for the page.
				$content = $page.children( ":jqmData(role=content)" ),
	
				// The markup we are going to inject into the content
				// area of the page.
				markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
	
				// The array of items for this category.
				cItems = category.items,
	
				// The number of items in the category.
				numItems = cItems.length;
	
			// Generate a list item for each item in the category
			// and add it to our markup.
			for ( var i = 0; i < numItems; i++ ) {
				markup += "<li>" + cItems[i].name + "</li>";
			}
			markup += "</ul>";
	
			// Find the h1 element in our header and inject the name of
			// the category into it.
			$header.find( "h1" ).html( category.name );
	
			// Inject the category items markup into the content element.
			$content.html( markup );
	
			// Pages are lazily enhanced. We call page() on the page
			// element to make sure it is always enhanced before we
			// attempt to enhance the listview markup we just injected.
			// Subsequent calls to page() are ignored since a page/widget
			// can only be enhanced once.
			$page.page();
	
			// Enhance the listview we just injected.
			$content.find( ":jqmData(role=listview)" ).listview();
	
			// We don't want the data-url of the page we just modified
			// to be the url that shows up in the browser's location field,
			// so set the dataUrl option to the URL for the category
			// we just loaded.
			options.dataUrl = url;
	
			// Now call changePage() and tell it to switch to
			// the page we just modified.
			$.mobile.changePage( $page, options );
		}
	});
}

 
// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {
		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage );
		if ( u.pathname.search("category.php") !== -1 ) {
			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u.href, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

</script>
</head>

<body>
<div data-role="page">
  <div data-role="header"><h1>Categories</h1></div>
  <div data-role="content">
  	<h2>Select a Category Below:</h2>
  	<ul data-role="listview" data-inset="true">
    	<li><a href="category.php?id=animals">Animals</a></li>
    	<li><a href="category.php?id=colors">Colors</a></li>
    	<li><a href="category.php?id=vehicles">Vehicles</a></li>
    </ul>
  </div>
</div>
<div id="category-items" data-role="page" data-add-back-btn="true">
  <div data-role="header"><h1></h1></div>
  <div data-role="content"></div>
</div>
</body>
</html>
